<template>
  <div id="c2cHelpCenter w-full h-full box-border" class="c2cHelpCenter">
    <div class="w-full h-full top ">
      <order-nav/>
      <div class="mt-45 text-white ml-32 font-48 font-600">{{ $t('c2c帮助中心') }}</div>
      <div class="font-24 text-white ml-32 mt-16 mb-42">{{ $t('7/24小时全球客服，随时随地为你提供服务') }}</div>
    </div>
    <div class=" col ">
      <div class="w-full box-radius bg-white h-full py-30 ">
        <van-tabs v-model="active">
          <van-tab :title="$t('新手')"></van-tab>
          <van-tab :title="$t('进阶')"></van-tab>
          <van-tab :title="$t('广告方')"></van-tab>
        </van-tabs>
        <div v-if="active === 0">
          <div class="px-32 ">
            <div>
              <div class="relative mt-40 mb-10">
                <img class=" w-full h-160 rounded-lg " :src="require('@/assets/image/c2cHelpCenter/p1.png')" alt="">
                <div class="text-white font-44 font-900 absolute left-28  w">{{ $t('c2c交易') }}</div>
              </div>
              <div class="font-500 font-28">{{ $t('什么是c2c交易？') }}</div>
            </div>
            <div>
              <div class="relative mt-40 mb-10">
                <img class=" w-full h-160 rounded-lg " :src="require('@/assets/image/c2cHelpCenter/p2.png')" alt="">
                <div class="text-white font-44 font-900 absolute left-28 w">{{ $t('购买数字货币') }}</div>
              </div>
              <div class="font-500 font-28">{{ $t('如何购买数字货币？') }}</div>
            </div>
            <div>
              <div class="relative mt-40 mb-10">
                <img class="relative w-full h-160 rounded-lg mt-40 mb-22"
                     :src="require('@/assets/image/c2cHelpCenter/p3.png')" alt="">
                <div class="text-white font-44 font-900 absolute left-28 w">{{ $t('出售数字货币') }}</div>
              </div>
              <div class="font-500 font-28">{{ $t('如何出售数字货币？') }}</div>
            </div>
            <div>
              <div class="relative mt-40 mb-10">
                <img class="relative w-full h-160 rounded-lg " :src="require('@/assets/image/c2cHelpCenter/p4.png')"
                     alt="">
                <div class="text-white font-44 font-900 absolute left-28 w">{{ $t('交易如何付款') }}</div>
              </div>
              <div class="font-500 font-28">{{ $t('c2c交易如何付款？') }}</div>
            </div>
            <div class="relative mt-40 mb-10">
              <div>
                <img class="relative w-full h-160 rounded-lg " :src="require('@/assets/image/c2cHelpCenter/p5.png')"
                     alt="">
                <div class="text-white font-44 font-900 absolute left-28  w">{{ $t('避免资产损失') }}</div>
              </div>
              <div class="font-500 font-28">{{ $t('c2c交易避免资产损失？') }}</div>
            </div>
          </div>
          <div class="text-black font-600 font-48 mt-66 mb-16 px-32">{{ $t('常见问题') }}</div>
          <div class="px-32">
            <div
                class="flex justify-between mt-28 pb-28 border-b-grey"
                v-for="(item,index) in quetionList"
                :key="'que' + index"
                @click="$router.push({
                  path: item.path,
                  query: {...item.query}
                })"
            >
              <div class="">{{ item.title }}</div>
              <van-icon class="text-grey" name="arrow"/>
            </div>
          </div>
        </div>
        <div v-if="active === 1" class=" px-32 border-none">
          <div class=" font-600 font-48 mt-52 mb-40">{{ $t('常见问题') }}</div>
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="blue">
            <van-swipe-item>
              <div class="font-600 font-36 mb-16 ">{{ $t('短信诈骗') }}</div>
              <div class="font-28 mb-30">{{ $t('买家发送假的的到账短信给卖家，卖家未打开收款账户核对就放币。') }}</div>
              <img class="w-full" src="@/assets/image/c2cHelpCenter/swipe1.png" alt="">
            </van-swipe-item>
            <van-swipe-item>
              <div class="font-600 font-36 mb-16 ">{{ $t('p图诈骗') }}</div>
              <div class="font-28 mb-30">{{ $t('买家PS假的付款证明发送给卖家，卖家未打开收款账户核对就放币。') }}</div>
              <img class="w-full" src="@/assets/image/c2cHelpCenter/swipe2.png" alt="">
            </van-swipe-item>
            <van-swipe-item>
              <div class="font-600 font-36 mb-16 ">{{ $t('伪装客服诈骗') }}</div>
              <div class="font-28 mb-30">{{ $t('买家发送假的的到账短信给卖家，卖家未打开收款账户核对就放币。') }}</div>
              <img class="w-full" src="@/assets/image/c2cHelpCenter/swipe3.png" alt="">
            </van-swipe-item>
          </van-swipe>
          <div class=" font-600 font-48 mt-48 mb-40">{{ $t('防冻卡指南') }}</div>
          <div class=" font-600 font-36  mb-16">{{ $t('预防冻卡') }}</div>
          <li class="font-28 mb-16">
            {{ $t('转账时，请勿备注敏感信息，如数字货币、比特币、BTC、USDT、ETH等。') }}
          </li>
          <li class="font-28 mb-40">
            {{ $t(' 当您有频繁出售数字货币的恶需求时，不要仅使用一张银行卡，可以多准备多张卡轮换使用。') }}
          </li>
          <div class=" font-600 font-36  mb-16">{{ $t('处理措施') }}</div>
          <li class="font-28 mb-16">
            {{
              $t('如果您的银行卡被冻结，请直接联系您的开户银行，按照银行的要求提供您的相关信息（一般是解释资金往来的原因）即可。')
            }}
          </li>
          <div class="text-black font-600 font-48 mt-66 mb-16 ">{{ $t('常见问题') }}</div>
          <div class="">
            <div
                class="flex justify-between mt-28 pb-28 border-b-grey"
                v-for="(item,index) in advanced_questions"
                :key="'que' + index"
                @click="$router.push({
                  path: item.path,
                  query: {...item.query}
                })"
            >
              <div class="">{{ item.title }}</div>
              <van-icon class="text-grey" name="arrow"/>
            </div>
          </div>
        </div>
        <div v-if="active === 2" class=" px-32 border-none">
          <img class="w-full mt-52 mb-22" src="@/assets/image/c2cHelpCenter/ad1.png" alt="">
          <!-- <div class="font-500 font-28">{{ $t('如何发布广告') }}</div>
          <img class="w-full mt-52 " src="@/assets/image/c2cHelpCenter/ad2.png" alt=""> -->
          <div class="px-22 py-30 bg1 h-260">
            <div class="text-white font-400 font-28">
              {{ $t('广告方专业版-接单模式适用于有广告发布需求的用户。您可以在接单模式发布和编辑广告和管理订单。') }}
            </div>
            <div class="mt-46 flex  items-center justify-center ">
              <div class="flex flex-col  flex-1  items-center">
                <img class="mb-16 w-64 h-64 lh-64 " src="@/assets/image/c2cHelpCenter/ad_icon1.png" alt="">
                <span class="font-28 font-400 text-white">{{ $t('发布广告') }}</span>
              </div>
              <div class="flex flex-col flex-1 items-center ">
                <img class="mb-16 w-64 h-64 " src="@/assets/image/c2cHelpCenter/ad_icon2.png" alt="">
                <span class="font-28 font-400 text-white">{{ $t('编辑广告') }}</span>
              </div>
              <div class="flex flex-col flex-1 items-center">
                <img class="mb-16 w-64 h-64 " src="@/assets/image/c2cHelpCenter/ad_icon3.png" alt="">
                <span class="font-28 font-400 text-white">{{ $t('发布广告') }}</span>
              </div>
            </div>
          </div>
          <div class="bg2 py-30 px-22">
            <div class="font-28 font-400">{{ $t('您可以在C2C交易首页更多设置【...】中进行模式切换') }}</div>
          </div>
          <div class="text-black font-600 font-48 mt-66 mb-16 ">{{ $t('常见问题') }}</div>
          <div class="">
            <div
                class="flex justify-between mt-28 pb-28 border-b-grey"
                v-for="(item,index) in ad_questions"
                :key="'que' + index"
                @click="$router.push({
                  path: item.path,
                  query: {...item.query}
                })"
            >
              <div class="">{{ item.title }}</div>
              <van-icon class="text-grey" name="arrow"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState
} from "vuex";
import otcApi from "@/API/otc";

import OrderNav from "@/components/order-nav/OrderNav";
import {Tab, Tabs, Icon, Swipe, SwipeItem} from 'vant';

export default {
  name: "c2cHelpCenter",
  data() {
    return {
      active: 0,
      quetionList: [],
      advanced_questions: [],
      ad_questions: [],
    };
  },
  created() {
    this.getHelpCenterNew();
    this.getHelpCenterAdvanced();
    this.getHelpCenterAd();
  },
  methods: {
    getHelpCenter(context, params) {

      otcApi.getC2cHelpCenter(params).then(res => {
        this[context] = this.handlerData(res.data);
      })
    },
    // 新手
    getHelpCenterNew() {

      const params = {
        language: this.language,
        model: 'c2c_help_center_newbie'
      }
      this.getHelpCenter('quetionList', params)
    },
    // 进阶
    getHelpCenterAdvanced() {

      const params = {
        language: this.language,
        model: 'c2c_help_center_advanced'
      }
      this.getHelpCenter('advanced_questions', params)
    },
    // 广告方
    getHelpCenterAd() {
      const params = {
        language: this.language,
        model: 'c2c_help_center_advertiser'
      }
      this.getHelpCenter('ad_questions', params)
    },
    handlerData(data) {
      const arr = [];
      data.forEach((item) => {
        arr.push({
          title: item.title,
          path: '/c2cTransactionAnswer',
          query: {
            content_code: item.content_code
          }
        })
      })

      return arr;
    }
  },
  computed: {
    ...mapState('language', ['language'])
  },
  components: {
    OrderNav,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
}
</script>

<style lang="scss" scoped>
.c2cHelpCenter {
  width: 100%;
  box-sizing: border-box;

  ::v-deep .van-nav-bar {
    background: #1D91FF;

    .van-icon {
      color: #fff;
    }
  }
}

.top {
  height: 300px;
  background: #1D91FF;
}

.ov_flow {
  overflow-y: auto;
}

.box-radius {
  border-radius: 40px 40px 0 0;
}

.col {
  background: #1D91FF;
}

.w {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.bg1 {
  background: #404244;
}

.bg2 {
  background: #36393D;
  color: #8F99A8;
}
</style>
